<template>
    <div class="app-container">
        <el-row>
            <el-col :span="5" class="tl-left-tree">
                <el-scrollbar ref="treeScroll">
                    <el-tree class="tl-tree" ref="tree" @node-click="nodeClick" :data="treeData" node-key="id" :expand-on-click-node="false" :default-expanded-keys="[0]" highlight-current></el-tree>
                </el-scrollbar>
            </el-col>
            <el-col :span="19">
                <el-row>
                    <!-- 查询 -->
                    <tl-list-search ref="search" :query-param="queryParam" @search="doQuery" :isDisplayDefaultSearch="false" v-if="isHeaderDisplay">
                        <template slot="search">
                            <el-form-item label="字段编码" prop="code">
                                <el-input v-model="queryParam.qry_code" placeholder></el-input>
                            </el-form-item>
                            <el-form-item label="字段名称">
                                <el-input v-model="queryParam.qry_name" placeholder></el-input>
                            </el-form-item>
                        </template>
                    </tl-list-search>
                </el-row>
                <el-card>
                    <el-row>
                        <!-- 工具栏 -->
                        <tl-list-toolbar ref="toolbar" @add="openAddDialog('editForm')" @exportExcel="doExportExcel" @deleteBatch="doDeleteBatch" @refresh="doRefresh" @columnCustomize="doColumnCustomize" @displaySearch="doDisplaySearch" :isDisplayDeleteBatch="user.adminlevel===9" :isDisplayAdd="user.adminlevel===9" :disableDeleteBatch="selectedRowKeys.length <= 0">
                            <el-button slot="left-btn" class="filter-item" type="primary" icon="el-icon-plus" @click="openDialogForOneKeyGeneral">一键生成档案</el-button>
                        </tl-list-toolbar>
                    </el-row>
                    <el-row ref="selector">
                        <!-- 列表选择 -->
                        <div class="table-alert-div">
                            <el-alert type="success" :closable="false" class="tl-table-alert-info" effect="light">
                                <template slot="title">
                                    已选择&nbsp;
                                    <a style="font-weight: bold;">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
                                    <a style="font-weight: bold;margin-left: 24px" @click="doClearSelected">全部清空</a>
                                </template>
                            </el-alert>
                        </div>
                    </el-row>
                    <el-row>
                        <el-table ref="mainTable" class="tl-table" :height="tableHeight" resizable-key="tableHeight" :resizable-reduce="42" :resizable-refs="tableResizeRefs" v-loading="loading" :data="datas" style="width: 100%;" @selection-change="doSelectChange" @sort-change="doSortChange" @row-dblclick="doRowDbClick" @row-click="doRowClick" row-key="id" border fit :row-class-name="doChangeRowClassName" :default-sort="{ prop: 'code', order: 'ascending' }">
                            <el-table-column type="selection" width="55px" fixed="left"></el-table-column>
                            <el-table-column type="index" label="序号" width="55px" align="center"></el-table-column>
                            <el-table-column prop="code" label="字段编码" width="150px" sortable="custom" sort-by="code" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="name" label="名称" width="150px" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="disppagecode" label="所属页面" width="150px" sortable="custom" sort-by="pagecode" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="placeholder" label="提示文字" width="150px" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="defaultvalue" label="默认值" width="150px" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="disprequired" label="是否必填" width="150px" sortable="custom" sort-by="required" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
                            <!-- <el-table-column prop="required" label="是否必填" width="150px" sortable="custom" sort-by="required" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="isshow" label="是否显示" width="150px" sortable="custom" sort-by="isshow" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="formater" label="格式化函数" width="150px" sortable="custom" sort-by="formater" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="vluecolor" label="字段值字体颜色" width="150px" sortable="custom" sort-by="vluecolor" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="namecolor" label="字段名字体颜色" width="150px" sortable="custom" sort-by="namecolor" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="valuefont" label="字段值字体样式" width="150px" sortable="custom" sort-by="valuefont" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="valuefontsize" label="字段值字体大小" width="150px" sortable="custom" sort-by="valuefontsize" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="namefontsize" label="字段名字体大小" width="150px" sortable="custom" sort-by="namefontsize" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>-->
                            <!-- <el-table-column prop="extendfield1" label="扩展字段1" width="150px" sortable="custom" sort-by="extendfield1" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="extendfield2" label="扩展字段2" width="150px" sortable="custom" sort-by="extendfield2" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="extendfield3" label="扩展字段3" width="150px" sortable="custom" sort-by="extendfield3" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="extendfield4" label="扩展字段4" width="150px" sortable="custom" sort-by="extendfield4" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="extendfield5" label="扩展字段5" width="150px" sortable="custom" sort-by="extendfield5" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="extendfield6" label="扩展字段6" width="150px" sortable="custom" sort-by="extendfield6" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="extendfield7" label="扩展字段7" width="150px" sortable="custom" sort-by="extendfield7" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="extendfield8" label="扩展字段8" width="150px" sortable="custom" sort-by="extendfield8" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="extendfield9" label="扩展字段9" width="150px" sortable="custom" sort-by="extendfield9" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="extendfield10" label="扩展字段10" width="150px" sortable="custom" sort-by="extendfield10" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>-->
                            <el-table-column prop="description" label="备注" min-width="250px" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
                            <!-- <el-table-column prop="enabled" label="有效" width="100px" sortable="custom" sort-by="enabled" align="center" header-align="center">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.enabled === 1" type="success">是</el-tag>
                  <el-tag v-else type="danger">否</el-tag>
                </template>
              </el-table-column>-->
                            <el-table-column label="操作" width="100px" v-slot="scope" fixed="right">
                                <el-dropdown trigger="hover">
                                    <el-button type="text" icon="el-icon-s-operation" style="margin-left:10px">
                                        更多
                                        <i class="el-icon-arrow-down el-icon--right"></i>
                                    </el-button>
                                    <el-dropdown-menu>
                                        <el-dropdown-item type="text" icon="el-icon-edit" @click.native="openEditDialog('editForm', scope.row.id)">编辑</el-dropdown-item>
                                        <el-dropdown-item type="text" icon="el-icon-delete" @click.native="doDelete(scope.row.id)" v-if="user.adminlevel==9">删除</el-dropdown-item>
                                        <el-dropdown-item icon="el-icon-view" @click.native="openViewDialog('editForm', scope.row.id)">查看</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </el-table-column>
                        </el-table>
                    </el-row>
                    <!-- 列表分页 -->
                    <!-- <el-row class="pagebar" ref="pager">
                        <el-pagination @size-change="doChangeSize" @current-change="doChangeIndex" :current-page="pageInfo.currentPage" :page-sizes="pageInfo.pageSizes" :total="pageInfo.totalCount" layout="total, sizes, prev, pager, next, jumper" background class="tl-table-pagination"></el-pagination>
                    </el-row> -->
                </el-card>
            </el-col>
            <!-- 编辑界面 -->
            <tl-edit ref="editForm" @refresh="doRefresh"></tl-edit>
        </el-row>
        <el-dialog title="一键生成业务系统的页面以及字段档案" :visible.sync="oneKeyGeneralFiledInfoDialog">
            <el-form class="tl-form" :model="oneKeyFormModel">
                <el-row :gutter="20">
                    <el-form-item label="pojo类的绝对路径" label-width="150px" required>
                        <el-input v-model="oneKeyFormModel.pojoPath" placeholder="例如：D:\projects\MIS\sourceCode\mis3.0\mis3-public\src\mis\java\com\topscomm\mis\pojo"></el-input>
                    </el-form-item>
                </el-row>
                <el-row :gutter="20">
                    <el-form-item label="系统简称" label-width="150px" required>
                        <el-input v-model="oneKeyFormModel.systemSimple" placeholder="例如：ehr、mpm，和系统中类的统一开头字母保持一致"></el-input>
                    </el-form-item>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="generalFieldInfo">生成</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
/** mixins */
import { mixin_list } from '@tapui/mixins/mixin_list'
/** 子组件 */
import tlEdit from './edit'
import { getAction, putAction, postAction, deleteAction } from '@tapui/utils/http'
import { Loading } from 'element-ui'

export default {
    name: 'misVuePageFieldInfo',
    mixins: [mixin_list],
    components: { tlEdit },
    data() {
        return {
            urlPrefix: '/mis/vuePageFieldInfo/',
            // 排序参数
            sorterInfo: {
                sidx: 'code',
                sord: 'asc'
            },
            isQueryOnCreated: false,
            fullscreenLoading: false,
            treeData: [],
            listTableLoading: false,
            // 数列表关联字段
            treeQueryKey: 'pagecode',
            oneKeyFormModel: {},
            oneKeyGeneralFiledInfoDialog: false
        }
    },
    methods: {
        /** 加载树数据 */
        loadTree() {
            return getAction('/mis/vuePageInfo/queryTreeList', this.queryTreeParam).then((res) => {
                if (res.success) {
                    this.treeData = []
                    this.treeData = res.result.dataList
                } else {
                    this.$tap.alert(res.message, 'warning')
                }
            })
        },
        generalFieldInfo() {
            this.fullscreenLoading = true
            const loading = this.$loading({
                lock: true,
                text: '正在生成档案',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            getAction("/mis/vuePageInfo/generalEditPageFieldArchive", this.oneKeyFormModel).then((res) => {
                loading.close()
                if (res.success) {
                    this.$tap.message('操作成功', 'success')
                    this.oneKeyGeneralFiledInfoDialog = false
                } else {
                    this.$tap.message(res.message, 'warning')
                }
            }).catch(err => {
                loading.close()
            })
        },
        openDialogForOneKeyGeneral() {
            this.oneKeyGeneralFiledInfoDialog = true
        },
        // 树节点点击时触发的方法
        nodeClick(clickData) {
            this.loading = true
            getAction(this.urlPrefix + 'list', { qry_pageCode: clickData.code }).then((res) => {
                this.loading = false
                if (res.success) {
                    this.datas = []
                    this.datas = res.result.dataList
                } else {
                    this.$tap.alert(res.message, 'warning')
                }
            })
        },
        // 打开新增对话框之后
        afterOpenAddDialog(editForm, rowData) {
            if (rowData) {
                this.$set(this.$refs[editForm].model, 'disppagecode', rowData.name)
                this.$set(this.$refs[editForm].model, 'pagecode', rowData.id)
            } else {
                if (this.selectTreeNode && this.selectTreeNode.id > 0) {
                    this.$set(this.$refs[editForm].model, 'disppagecode', this.selectTreeNode.name)
                    this.$set(this.$refs[editForm].model, 'pagecode', this.selectTreeNode.id)
                }
            }
        },
        // 禁用表格前面的选择
        doDisableCheckBox(row, index) {
            if (row.state !== 0 && row.state !== 2) {
                return false
            } else {
                return true
            }
        }
    },
    created() {
        this.loadTree()
    }
}
</script>
<style lang="scss" scoped></style>

